<template>
	<view class="main">
		<view class="top" style="height: 55px;">
			<u-tabs class="tab"
				:list="tablist" 
				@click="changeTab"
				lineColor="#FF5000"
				:activeStyle="{color: '#323233'}"
				:inactiveStyle="{color: '#666666'}"
				itemStyle="width:50vw;height:55px;margin:0px;padding:0px;"
			></u-tabs>	
		</view>
		<view class="bottom" style="flex:1;overflow: auto;">
			<xj ref="xjComponent" v-show="currentTab==0"></xj>
			<yw ref="ywComponent" v-show="currentTab==1"></yw>
		</view>
	</view>
</template>

<script> 
	import xj from './xj/index.vue'
	import yw from './yw/index.vue'
	export default{
		async onShow(){
			await this.refreshData()
		},
		data(){
			return{
				tablist:[{
					name:'巡检工单'
				},{
					name:'运维工单'
				}],
				currentTab:0,
			}
		},
		methods:{
			changeTab(item){
				this.currentTab = item.index;
			},
			async refreshData() {
				// 等待 xjComponent 和 ywComponent 被创建
				while (!this.$refs.xjComponent || !this.$refs.ywComponent) {
					await this.$nextTick();
				}
				// 刷新数据
				if (this.currentTab === 0) {
					// 刷新 xj 组件的数据
					this.$refs.xjComponent.refresh();
				} else if (this.currentTab === 1) {
					// 刷新 yw 组件的数据
					this.$refs.ywComponent.refresh();
				}
			},
		},
		mounted(){
		},
		components:{
			xj,
			yw
		},
	}
</script>

<style>
.main{
	background-color: #FAFAFA;
	height: 100vh;
	display: flex;
	flex-direction: column;
}
</style>